<template>
  <div class="riskPoint">
    <div class="tabr-nav-title">
      <van-nav-bar
        :title="title"
        style="width: 100%; height: 44px"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="content">
      <div class="search">
        <van-field v-model="keyword" placeholder="请输入关键字" right-icon="search" />
        <van-dropdown-menu
          ref="menuRef"
          :close-on-click-overlay="false"
          :close-on-click-outside="false"
        >
          <van-dropdown-item ref="itemRef">
            <template #title>
              <span class="filter-o"><van-icon name="filter-o" size="20" /></span>
            </template>
            <div class="filter-content">
              <van-form ref="formRef">
                <van-cell-group inset>
                  <van-field
                    v-model="formData.region"
                    name="region"
                    label="区域"
                    @click="openPicker('region')"
                    readonly
                    label-align="top"
                    right-icon="arrow-down"
                  />
                  <van-field
                    v-model="formData.isBinding"
                    label="是否关联感知设备"
                    @click="openPicker('isBinding')"
                    style="width: 50%"
                    readonly
                    label-align="top"
                    right-icon="arrow-down"
                  />
                  <van-field
                    v-model="formData.isCamera"
                    label="是否关联视频监控"
                    @click="openPicker('isCamera')"
                    style="width: 50%"
                    readonly
                    label-align="top"
                    right-icon="arrow-down"
                  />
                  <van-field
                    v-model="formData.isContingencyPlan"
                    @click="openPicker('isContingencyPlan')"
                    label="是否配置预案"
                    style="width: 50%"
                    readonly
                    label-align="top"
                    right-icon="arrow-down"
                  />
                  <van-field
                    v-model="formData.isPerson"
                    @click="openPicker('isPerson')"
                    label="是否配置责任人"
                    style="width: 50%"
                    readonly
                    label-align="top"
                    right-icon="arrow-down"
                  />
                  <van-field
                    v-model="formData.pointType"
                    @click="openPicker('pointType')"
                    label="点位类型"
                    style="width: 50%"
                    readonly
                    label-align="top"
                    right-icon="arrow-down"
                  />
                  <van-field
                    v-model="formData.creatTime"
                    @click="datePicker = true"
                    label="创建时间"
                    style="width: 50%"
                    readonly
                    label-align="top"
                    right-icon="arrow-down"
                  />
                </van-cell-group>
              </van-form>
            </div>
            <div style="padding: 5px 16px">
              <van-button type="primary" block @click="onFirm">确认</van-button>
              <van-button style="margin-top: 5px" block @click="onReset">重置</van-button>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
      <div class="cardList">
        <VList
          :listData="listData"
          :total="15"
          :pageSize="10"
          @getData="getListCard"
          @cardClick="cardClick"
        >
          <template v-slot:default="{ row }">
            <div class="itemTop">
              <span>
                {{ row.address || "-" }}
              </span>
              <span
                class="riskType"
                :style="{
                  color: returnColor(row.risk),
                  border: `1px solid ${returnColor(row.risk)}`,
                }"
              >
                {{ row.risk || "-" }}
              </span>
            </div>
            <div class="itemCenter">
              {{ row.title || "-" }}
            </div>
            <div class="itemMiddle">
              <div class="one">
                摄像头：<span :style="{ color: row.camera == 1 ? 'red' : '' }">
                  {{ row.camera == 1 ? "是" : "否" }}</span
                >
              </div>
              <div class="two">
                液位计：<span :style="{ color: row.levelGauge == 1 ? 'red' : '' }">
                  {{ row.levelGauge == 1 ? "是" : "否" }}</span
                >
              </div>
              <div class="one">
                配置预案：
                <span :style="{ color: row.genericPlan == 1 ? 'red' : '' }">
                  {{ row.genericPlan == 1 ? "是" : "否" }}</span
                >
              </div>
              <div class="two">
                配置负责人：<span :style="{ color: row.director == 1 ? 'red' : '' }">
                  {{ row.director == 1 ? "是" : "否" }}</span
                >
              </div>
            </div>
            <div class="itemBottom">
              <span class="target">
                {{ row.target || "-" }}
              </span>
              <span style="margin-right: 10px">
                {{ row.time ? new Date(row.time).toLocaleString() : "-" }}
              </span>
            </div>
          </template>
        </VList>
      </div>
    </div>
    <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
      <van-picker
        :columns="columns"
        :model-value="pickerValue"
        @confirm="onPicker"
        @cancel="showPicker = false"
      />
    </van-popup>
    <van-popup v-model:show="datePicker" destroy-on-close position="bottom">
      <van-picker-group
        title="开始日期"
        :tabs="['开始日期', '结束日期']"
        @confirm="dateConfirm"
        @cancel="datePicker = false"
      >
        <van-date-picker v-model="formData.startDate" :max-date="maxDate" />
        <van-date-picker v-model="formData.endDate" :max-date="maxDate" />
      </van-picker-group>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getCurrentDateTimeArray } from "@/utils/common.ts";
import VList from "@/components/vList.vue";
import { oldData, newData } from "./data.js";
const router = useRouter();
const route = useRoute();
const formRef = ref(null); //表单
const keyword = ref(""); //关键字
const menuRef = ref(null); //下拉菜单
const itemRef = ref(null); //下拉菜单内容
const showPicker = ref(false); //重复选择器
const datePicker = ref(false); //日期选择器
const pickerValue = ref([]); // 选择器值
const columns = ref([]); //选择器内容
const pickerType = ref(""); //选择器类型
const dateTimeArray = getCurrentDateTimeArray(); // 获取当前日期
const maxDate = new Date(dateTimeArray[0].join("-")); //最大日期
const minDate = new Date(2020, 1, 1); //最小日期
const columnsData = reactive({
  //选择器多样内容
  columns1: [
    { text: "杭州", value: "Hangzhou" },
    { text: "宁波", value: "Ningbo" },
    { text: "温州", value: "Wenzhou" },
    { text: "绍兴", value: "Shaoxing" },
    { text: "湖州", value: "Huzhou" },
  ],
  columns2: [
    { text: "是", value: 1 },
    { text: "否", value: 0 },
  ],
  columns3: [
    { text: "十字路口", value: "十字路口" },
    { text: "城区道路主干道", value: "城区道路主干道" },
  ],
});
const formData = reactive({}); //表单数据
const title = route.query.title; //标题
const listData = ref(oldData);
const returnColor = (type: string) => {
  //根据类型返回颜色
  if (type === "低风险") {
    return "rgb(1, 164, 15)";
  }
  if (type === "中风险") {
    return "rgb(236, 115, 7)";
  }
  if (type === "高风险") {
    return "rgb(255, 12, 12)";
  }
  if (type === "有一定风险") {
    return "rgb(25, 175, 221)";
  }
  if (type === "历史风险") {
    return "rgb(208, 208, 208)";
  }
};
const getListCard = (params) => {
  if (params.pageNum == 1) {
    listData.value = oldData;
  } else {
    listData.value = newData;
  }
};
const openPicker = (type) => {
  //分类型打开选择器
  if (type == "region") {
    columns.value = columnsData.columns1;
  } else if (type == "pointType") {
    columns.value = columnsData.columns3;
  } else {
    columns.value = columnsData.columns2;
  }
  pickerType.value = type;
  showPicker.value = true;
};
const dateConfirm = () => {
  //日期选择器确定
  formData.creatTime = formData.startDate.join("-") + "-" + formData.endDate.join("-");
  formData.startDate = formData.startDate.join("-") + " 00:00:00";
  formData.endDate = formData.endDate.join("-") + " 00:00:00";
  datePicker.value = false;
};

const onClickLeft = () => history.back(); //返回
const onPicker = ({ selectedValues, selectedOptions }) => {
  //分类型选择器确定
  if (pickerType.value == "region") {
    formData.region = selectedOptions[0]?.text;
  }
  if (pickerType.value == "isBinding") {
    formData.isBinding = selectedOptions[0]?.text;
  }
  if (pickerType.value == "isCamera") {
    formData.isCamera = selectedOptions[0]?.text;
  }
  if (pickerType.value == "isContingencyPlan") {
    formData.isContingencyPlan = selectedOptions[0]?.text;
  }
  if (pickerType.value == "isPerson") {
    formData.isPerson = selectedOptions[0]?.text;
  }
  if (pickerType.value == "pointType") {
    formData.pointType = selectedOptions[0]?.text;
  }
  if (pickerType.value == "creatTime") {
    formData.creatTime = selectedOptions[0]?.text;
  }
  pickerValue.value = selectedValues;
  showPicker.value = false;
};
const onFirm = () => {
  //确定
  console.log(formData, "formData");
  // itemRef.value.toggle();
  // 或者
  menuRef.value.close();
};
const onReset = () => {
  for (const key in formData) {
    if (Object.hasOwnProperty.call(formData, key)) {
      formData[key] = "";
    }
  }
};
const cardClick = (item) => {
  console.log(item, "item");
  //点击卡片跳转详情
  router.push({
    path: "/pointDetail",
    // query: {
    //   status: item.state,
    //   id: item.id,
    // },
  });
};
</script>

<style scoped lang="less">
.riskPoint {
  height: 100vh;
  background: #f7f8f7;

  .tabr-nav-title {
    display: flex;
    align-items: center;
    font-weight: 600;
    height: 44px;
    font-size: 18px;
    color: #29292c;
    text-align: center;
    font-style: normal;
    background: #fff;
    width: 100vw;
  }
  .content {
    margin: 10px;
    box-sizing: border-box;
    .search {
      height: 30px;
      display: flex;
      justify-content: space-between;
      .van-field {
        width: calc(100% - 40px);
        background: #fff;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 10px;
      }
      :deep(.van-dropdown-menu__bar) {
        background: #fff;
        margin-left: 10px;
        height: 30px;
        width: 30px;
        .van-dropdown-menu__title {
          padding: 0;
        }
        .van-dropdown-menu__title:after {
          display: none;
        }
        .van-dropdown-menu__title--down:after {
          display: none;
        }
      }

      :deep(.van-dropdown-item) {
        top: 93px !important;
      }
      .filter-o {
        height: 30px;
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .filter-content {
        padding: 10px 0;
        .van-form {
          display: flex;
          flex-wrap: wrap;
        }
        :deep(.van-cell-group) {
          display: flex;
          flex-wrap: wrap;
        }
        :deep(.van-field) {
          width: 100%;
          height: auto;
          .van-field__value {
            background: #f2f2f2;
            height: 40px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            .van-field__body {
              width: 100%;
            }
          }
        }
      }
    }
    .cardList {
      height: calc(100vh - 104px);
      overflow-y: auto;
      margin-top: 10px;
      box-sizing: border-box;

      .itemTop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .riskType {
          padding: 0 10px;
          background: #fff;
          border-radius: 0 5px;
          height: 18px;
        }
        span {
          background: #26a2de;
          color: #fff;
          font-size: 10px;
          padding: 0 5px;
          line-height: 20px;
          height: 20px;
          border-radius: 5px 0;
        }
      }
      .itemCenter {
        color: #000;
        text-align: left;
        padding: 5px 10px;
      }
      .itemMiddle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        .one {
          flex: 1;
          text-align: center;
          background: #f2f2f2;
        }
        .two {
          flex: 1;
          text-align: center;
          background: #f9f9f9;
        }
      }
      .itemBottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 5px;
        .target {
          background: #26a2de;
          color: #fff;
          font-size: 10px;
          padding: 0 5px;
          line-height: 20px;
          height: 20px;
          border-radius: 0 5px;
        }
      }
    }
  }
}
</style>
